<script setup lang="ts">
import type { RouteRecordRaw } from 'vue-router';
import { useRouter } from 'vue-router';

import { convertUiMenus, filterMenus } from './helper';
import AA from './01_06.vue';

import usePermissionStore from '@/store/modules/permission';
import { useAppearanceSettingStore } from '@/store/modules/appearance-setting';
import { renderIcon } from '@/utils/common';
import { svgIconComponents } from '@/plugins/icons';

defineOptions({
  name: 'Index',
});

const permissionStore = usePermissionStore();
const appTheme = computed(() => useAppearanceSettingStore().appTheme);
const borderRadius = computed(() => useAppearanceSettingStore().borderRadius);

const menus = ref<Recordable[]>([]);
const sidebarRouters = computed<RouteRecordRaw[]>(() => permissionStore.getSideBarRoutes());

function updateMenu() {
  const filteredMenus = filterMenus(sidebarRouters.value as any);
  menus.value = convertUiMenus(filteredMenus);
  tabsValue.value = menus.value[0].key;

  tempMenu.value = menus.value[0].children;
}
const tabsValue = ref();
onMounted(() => {
  updateMenu();
});

const tempMenu = ref([]);

const router = useRouter();
function handleMenu(menu: Recordable) {
  router.push(menu.key);
}
</script>

<template>
  <div>
    <NCard>
      <div class="text-lg">
        全部应用
      </div>

      <NTabs v-model:value="tabsValue" type="line" animated>
        <NTabPane
          v-for="item of menus"
          :key="item.key"
          :name="item.key"
          :tab="item.label"
        >
          <div class="w-full flex flex-wrap  items-center">
            <div
              v-for="menu of item.children" :key="menu.key"
              class="menu-item"
              @click="handleMenu(menu)"
            >
              <component :is="renderIcon(menu.icon, 32)" />

              <span class="ml-4">
                {{ menu.label }}
              </span>
            </div>
          </div>
        </NTabPane>
      </NTabs>
    </NCard>

    <div class="flex flex-wrap">
      <div v-for="item of svgIconComponents" :key="item.name" class="w-[100px] h-[20px]">
        {{ item.name }}
      </div>
    </div>

    <AA />
  </div>
</template>

<style scoped lang="less">
.top {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-item {
  width: 200px;
  height: 36px;
  padding: 16px;
  border: 1px solid #eaeaea;
  margin: 0 10px 10px 0;
  border-radius: v-bind(borderRadius);
  display: flex;
  align-items: center;
  cursor: pointer;
  &:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    border: 1px solid v-bind(appTheme);
  }
}
</style>
